/* eslint-disable */
import echarts from "echarts/lib/echarts";
import Chart from "echarts-for-react/lib/core";

// 柱状图
export default function ChartBars({ xData = [], yLabel = '', data = [], title = '' }) {
  const option = {
    color: ["#00DEFF", "#46CC92"],
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      right: '10%'
    },
    toolbox: {
      feature: {
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    legend: {
      data: ['运输车次', '运输量'],
      textStyle: {
        color: "#fff",
      },
    },
    xAxis: [
      {
        type: 'category',
        axisLine: { show: false },
        axisTick: { show: false },
        splitLine: { show: false },
        axisLabel: { color: "#fff" },
        data: ['1/1', '1/2', '1/3', '1/4', '1/5', '1/6', '1/7', '1/8', '1/9', '1/10', '1/11', '1/12', '1/13', '1/14', '1/15', '1/16', '1/17', '1/18', '1/19', '1/20', '1/21', '1/22', '1/23', '1/24', '1/25', '1/26', '1/27', '1/28', '1/29', '1/30', '1/31']
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '运输车次(趟)',
        position: 'left',
        splitLine: { show: false },
        axisTick: { show: false },
        axisLine: { lineStyle: { color: "#fff" } },
        axisLabel: { color: "#fff" }
      },
      {
        type: 'value',
        name: '运输量(t)',
        position: 'right',
        splitLine: { show: false },
        axisTick: { show: false },
        axisLine: { lineStyle: { color: "#fff" } },
        axisLabel: { color: "#fff" }
      }
    ],
    series: [
      {
        name: '运输车次',
        type: 'bar',
        data: [50, 32, 36, 40, 35, 50, 42, 26, 36, 20, 42, 33, 35, 45, 35, 34, 41, 32, 29, 40, 36, 44, 36, 33, 40, 36, 40, 40, 36, 34, 40],
        barWidth: 6,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "rgba(0,222,255,1)" },
              { offset: 1, color: "rgba(29,87,117,1)" }
            ]),
            barBorderRadius: [5, 5, 0, 0]
          }
        }
      },
      {
        name: '运输量',
        type: 'line',
        yAxisIndex: 1,
        data: [20, 22, 33, 45, 33, 42, 30, 34, 23, 30, 28, 38, 23, 31, 22, 33, 33, 34, 23, 34, 36, 36, 38, 46, 43, 36, 45, 36, 29, 40, 44],
        itemStyle: {
          normal: {
            color: '#DFFF92'
          }
        }
      }
    ]
  };

  return (
    <div className="situational-detail">
      <Chart
        echarts={echarts}
        option={option}
        notMerge
        lazyUpdate
        style={{ height: 220 }}
      />
    </div>
  );
}